<template>
  <div class="tabs-body">
    <div class="tabs-header">
      <el-input
        v-model="tabsInput"
        size="small"
        placeholder="请输入标签，可连续输入多个，使用空格或任意符号进行分割"
        style="width:380px;margin-right:10px;"
        @keyup.enter.native="tabsSub"
      ></el-input>
      <el-button size="small" type="primary" @click="tabsSub">贴上</el-button>
      <!-- <el-button size="small" type="primary" @click="openTagLib">标签库</el-button> -->
      <el-button size="small" type="danger" :disabled="selectTagList.length == 0" @click="delBtn">删除</el-button>
    </div>
    <div class="tabs-content">
      <el-tag
        class="tabs-body-tag"
        v-for="item in tagList"
        :key="item.name"
        :effect="item._show ? 'dark' : 'plain'"
        @click="clickTag(item)"
      >{{ item.name }}</el-tag>
    </div>
  </div>
  <!-- <tag-lib ref="tagLib" @on-change="tagLibChange"></tag-lib> -->
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TagList",
})
</script>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import TagLib from "./TagLib.vue";

interface tagItem {
  _show: boolean;
  name: string;
}
let emit = defineEmits<{
  /**
   * 页面关闭
   */
  (e: "on-change", value: any): void;
  /**
   * 点击页面保存按钮并成功
   */
  (e: "submit"): void
}>()


let tagList = ref<tagItem[]>([])


/**
 * 被选中的tagList
 */
let selectTagList = computed<any[]>(() => {
  let list = [];
  for (let item of tagList.value) {
    if (item._show) {
      list.push(item);
    }
  }
  return list;
})
/**
 * 传入数值
 */
function init(list: { name: string }[]) {
  tagList.value = list.map(item => {
    return {
      _show: false,
      name: item.name
    };
  });
}
/**
 * 标签输入
 */
let tabsInput = ref<string>("")
/**
 * 贴上
 */
function tabsSub() {
  if (!tabsInput.value) {
    ElMessage.warning("输入的标签不能为空");
    return;
  }
  //字符串拆分，比如输入A,B,C 或 A B C 或 A，B，C 则都为3个标签。js正则表达式后面/g是多匹配的意思
  var re = /([^ \f\n\r\t\v`~!@#$%^&*()=\+\\\|{}\[\]'";:,<>//?·！￥……（）——、【】｛｝‘’“”；：、？。》，《]|\d)+/g; //排除空格换行以及各种特殊字符
  var textTagValueArray = tabsInput.value.match(re);
  if (textTagValueArray == null) {
    ElMessage.warning("输入的标签不能为空");
    return;
  }
  for (let name of textTagValueArray) {
    if (
      !tagList.value.find((item: any) => {
        return name == item.name;
      })
    ) {
      tagList.value.push({
        name: name,
        _show: false
      });
    }
  }
  emit("on-change", tagList.value);
  //清空输入框内容
  tabsInput.value = "";
}

/**
 * 打开标签库
 */
//  function openTagLib(){
//     this.$refs.tagLib.show(tagList.value);
//   }

/**
 * 标签库数据更新
 */
function tagLibChange(list: any[]) {
  tagList.value = list.map((item: any) => {
    return {
      name: item.name,
      _show: false
    }
  })
  emit("on-change", tagList.value);
}

/**
 * 删除选中
 */
function delBtn() {
  let list: tagItem[] = [];
  for (let item of tagList.value) {
    if (!item._show) {
      list.push(item);
    }
  }
  tagList.value = list;
  emit("on-change", tagList.value);
}

/**
 * 点击标签
 */
function clickTag(item: tagItem) {
  item._show = !item._show;

}

defineExpose({
  init
})

</script>
<style lang="less" scoped>
.tabs-header {
  padding-bottom: 10px;
}
.tabs-content {
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  > .tabs-body-tag {
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
}
</style>